<?php
    $lang = @substr($_SERVER['HTTP_ACCEPT_LANGUAGE'],0,5);
    $lang = explode(",",strtolower($lang))[0];

    if (preg_match("/en/i", $lang))
        $lang_arr = require 'lang/en-lang.php';
    else if (preg_match("/ar/i", $lang))
        $lang_arr = require('lang/ar-lang.php');
    else if (preg_match("/zh-cn/i", $lang))
        $lang_arr = require 'lang/cn-lang.php';
    else if (preg_match("/ja/i", $lang))
        $lang_arr = require('lang/ja-lang.php');
    else if (preg_match("/ko/i", $lang))
        $lang_arr = require('lang/ko-lang.php');
    else if (preg_match("/pt-pt/i", $lang))
        $lang_arr = require('lang/pt-lang.php');
    else if (preg_match("/vi/i", $lang))
        $lang_arr = require('lang/vi-lang.php');
    else
        $lang_arr = require 'lang/en-lang.php';

   if(isset($_GET['lang']) && !empty($_GET['lang'])){
        $lang_arr = require 'lang/'.$_GET['lang'].'-lang.php';
   }

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nightscloudlive</title>

     <link rel="apple-touch-icon-precomposed" href="img2/favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="img2/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">

</head>
<body>

<div class="out-container">
    <div class="video-bg pc-dis-no" id="video-bg">
        <div class="video">
            <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" muted autoplay="autoplay" preload >

            </video>
        </div>
    </div>


    <div class="out-wrapper">


    <header class="container J_Header header">
        <div class="header-container">
            <div class="logo-warpper">
                <a class="logo" id="logo" href="###"></a>
            </div>
            <!--<div class="col-3 pc-dis-no space"></div>-->
            <div class="col-3 pc-dis-no navbar-btn">
                <div class="hamburger" id="hamburger">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </div>
            </div>
            <div class="nav-warpper" id="downlist">
                <a href="###" id="home"><?php echo $lang_arr['Home']; ?></a>
                <a href="###" id="newsroom"><?php echo $lang_arr['Newsroom']; ?></a>
                <a href="###" id="download" class=""><?php echo $lang_arr['Download']; ?></a>
                <a href="###recharge/" id="recharge" class="dis-no">Recharge</a>
                <a href="###mas" id="musician" class="dis-no">Musician</a>
                <span class="menu-line"></span>

                <a href="###" class="pc-dis-no mb-logo">
                    <img src="img/logo_dl_785ac87.png" alt="tiktok">
                </a>
            </div>
        </div>
    </header>

    <div class="container auto-width right-panel">
        <div class="content-box">
            <img src="img/tiktok_logo.png" alt="TikTok"
                 class="logo pc-vis-hid"/>

            <div class="content-header">
                <div class="content-header-desc">
                    <p class="content-header-slogen pc-vis-hid">Make Every Second Count</p>
                </div>
            </div>


            <div class="content-footer">
                <div class="download-btn-group">
                    <a class="download-btn download-ios-btn" id="download_ios" data-role="iphone"
                    href="###">

                    </a>
                    <a class="download-btn download-android-btn" data-role="android" id="download_android"
                    href="###">

                    </a>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="">
            <div class="infomation-group">



                <div class="follow-us">
                    <ul>
                        <li>
                            <a class="follow-img-1"  href="###/tiktok/"></a>
                            <p>Instagram</p>
                        </li>
                        <li>
                            <a class="follow-img-2"  href="###/tiktok/"></a>
                            <p>Facebook</p>
                        </li>
                        <li>
                            <a class="follow-img-3"  href="###/tiktok/"></a>
                            <p>Twitter</p>
                        </li>
                        <li>
                            <a class="follow-img-4"  href="###/tiktok/"></a>
                            <p>Youtube</p>
                        </li>
                    </ul>
                </div>
            </div>


            <div class="follow-language">

                <div class="info">

                    <div class="language"><span><?php echo $lang_arr['Language']; ?>:</span>
                        <div class="language-wrap" id="languageWrap">
                            <p><?php echo $lang_arr['LanguageName']; ?></p>
                            <div class="language-list" id="lg-list">
                                <a class="language-li" href="/?lang=en" id="language-en">English</a>
                                <a class="language-li" href="/?lang=ko" id="language-ko">한국어</a>
                                <a class="language-li" href="/?lang=ja" id="language-ja">日本語</a>
                                <a class="language-li" href="/?lang=vi" id="language-vi">Tiếng Việt</a>
                                <a class="language-li" href="/?lang=pt" id="language-pt">Português</a>
                                <a class="language-li" href="/?lang=ar" id="language-ar"> عربي</a>
                            </div>
                        </div>
                    </div>

                    <div class="copyright"><span><?php echo $lang_arr['All Rights Reserved']; ?> | NIGHTS</span></div>

                </div>
            </div>
        </div>
    </footer>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#hamburger").click(function () {
    $(".navbar-btn").toggleClass("z9999");
    $("#downlist").slideToggle("fast");
    $(".J_Header").toggleClass("black-bg");
    $(this).toggleClass("is-active");
})

$("#languageWrap").click(function () {
    // $("#lg-list").slideToggle();
    $("#lg-list").toggleClass("la-dis");

})
</script>

<script type="text/javascript" src="js/vue.js"></script>
<script src="//vjs.zencdn.net/5.19/video.min.js"></script>
<script type="text/javascript" src="js/video.min.js"></script>

<script type="text/javascript">
    // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
    videojs.options.flash.swf = 'js/videojs/swf/video-js.swf';

    var vm = new Vue({
        el: '#video-bg',
        data: {
            visible: true,
            listItem:[
                {isplay:true, type:"video/mp4", url: "img/home-bg1.mp4"},
                {isplay:true, type:"video/mp4", url: "img/home-bg2.mp4"},
                {isplay:true, type:"video/mp4", url: "img/home-bg3.mp4"}
            ]
        },
        mounted:function(){
            this.show();
        },
        filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            }
        },
        methods: {
            show: function () {
                this.visible = true;
            }

        }
    });

    var list = vm.listItem;
    var i = 0;
    $(function(){

        var source = document.getElementById("video-source");
        var player = videojs("my-player", {
            "autoplay":true,
            "sources": [{
                src: list[i].url,
                type: list[i].type
            }],

        }, function(){
            this.on('loadeddata',function(){
                this.play();
            })
            this.on('ended',function(){
                i++;
                if(i >= list.length){
                    i = 0;
                }
                var videoObj = list[i];
                this.src({type: videoObj.type, src: videoObj.url});
                this.play();
            })

        });
    });
</script>


</html>